---
import type { MarkdownHeading } from "astro";
export interface Props {
  title?: string;
  headings?: MarkdownHeading[];
}

const { title = "Astro", headings = [] } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    {
      !!headings?.length && (
        <aside>
          <nav>
            <ul>
              {headings.map((h) => (
                <li data-depth={h.depth}>
                  <a href={`#${h.slug}`}>{h.text}</a>
                </li>
              ))}
            </ul>
          </nav>
        </aside>
      )
    }
    <main>
      <slot />
    </main>
  </body>
</html>
<style is:global>
  *,
  *::before,
  *::after {
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
  }

  html,
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: 1.125rem;
  }

  body {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
    gap: 1em;
    max-width: 72rem;
    margin-inline: auto;
    padding: 1em;
  }

  main {
    grid-column: 1;
  }

  aside {
    font-size: 0.9em;
  }

  @media (min-width: 50rem) {
    body {
      grid-template-columns: 4fr minmax(16rem, 1fr);
    }

    aside {
      position: sticky;
      top: 0em;
      grid-column: 2;
      align-self: start;
      overflow-y: scroll;
    }
  }

  aside > nav > ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0;
    padding-inline-start: 0;
  }

  nav ul > li[data-depth="1"] {
    padding-inline-start: 0em;
  }

  nav ul > li[data-depth="2"] {
    padding-inline-start: 1em;
  }

  nav ul > li[data-depth="3"] {
    padding-inline-start: 2em;
  }

  pre.shiki {
    padding: 0.5em 1em;
  }
</style>
